<template>
  <div>
   <div style="margin-top: 20px">
     <span style="margin-left: 10px" >选择日期</span>
     <el-date-picker
       v-model="selectData"
       type="date"
       size="small"
       @change="getDate"
       value-format="yyyy-M-d"
       placeholder="选择日期"
       style="margin-left: 10px">
     </el-date-picker>
   </div>
    <div style="display: flex;justify-content: space-between;margin-top: 20px">
      <LineChart :incomeArr="incomeArr" :expendArr="expendArr" :title="titleLine"></LineChart>
      <PieChart style="width: 50%" :incomeType="incomeType" :expenseType="expenseType" :title="titlePie"></PieChart>
    </div>
    <PanelGroup :totalIncome="totalIncome" :totalExpense="totalExpense" :incomeCount="incomeCount"></PanelGroup>
  </div>
</template>

<script>
import LineChart from '@/views/dashboard/LineChart.vue'
import PanelGroup from '@/views/dashboard/PanelGroup.vue'
import PieChart from '@/views/dashboard/PieChart.vue'
import { getMonthInfo, getMonthTypeInfo, getDateInfo } from '@/api/dataView/dataView'

export default {
  name: "dataView",
  components: { PieChart, PanelGroup, LineChart },

  mounted() {
    let nowDate = new Date()
    this.date = nowDate.getFullYear() + '-' + (nowDate.getMonth() + 1) + '-' +nowDate.getDate()
    this.titleLine = nowDate.getFullYear() + '年收入支出报表'
    this.titlePie = nowDate.getFullYear() + '年' + (nowDate.getMonth() + 1) + '月支出情况图'
    this.getMonthData(this.date)
    this.getMonthTypeMessage(this.date)
    this.getDateMessage(this.date)
  },

  data(){
    return{
      //当前日期
      date: '',
      //选中的日期
      selectData: '',
      //一年当中各个月收入的情况
      incomeArr: [],
      //一年中各个月支出的情况
      expendArr: [],
      //选中日期的支出
      totalIncome: '',
      //选中日期的收入
      totalExpense: '',
      //选中日期的订单数
      incomeCount: '',
      //当月收入的情况
      incomeType: [1200, 2400],
      //当月支出情况
      expenseType: [],

      titleLine:'',
      titlePie:''
    }
  },

  methods:{
    getDate(){
      this.getMonthData(this.selectData)
      this.getMonthTypeMessage(this.selectData)
      this.getDateMessage(this.selectData)
    },

    async getMonthData(data){
      this.incomeArr = []
      this.expendArr = []

      //传递报表名字
      if (this.selectData.length > 0)
      {
        let temp = this.selectData.split('-')
        this.titleLine = temp[0] + '年收入支出报表'
        this.titlePie = temp[0] + '年' + temp[1] + '月支出情况图'
      }

      let tempIncomeArr = new Array(12).fill(0)
      let tempExpendArr = new Array(12).fill(0)
      await getMonthInfo(data).then(response => {
        response.data.income.forEach(item => {
          tempIncomeArr.splice(item.month-1,1,item.sumSalary)
        })

        tempIncomeArr.forEach(item => {
          this.incomeArr.push(item)
        })

        response.data.expense.forEach(item => {
          tempExpendArr.splice(item.month-1,1,-item.sumSalary)
        })
        tempExpendArr.forEach(item => {
          this.expendArr.push(item)
        })
      })
    },

    async getMonthTypeMessage(data){
      this.expenseType = []
      let tempExpenseType = [0,0,0,0,0]
      await getMonthTypeInfo(data).then(response => {
        response.data.expense.forEach(item => {
          tempExpenseType.splice(item.billTypeId-3,1,-item.sumSalary)
        })
      })

      tempExpenseType.forEach(item => {
        this.expenseType.push(item)
      })
    },

    async getDateMessage(data){
      await getDateInfo(data).then(response => {
        if (response.data != null){
          this.totalIncome = response.data.totalIncome
          this.totalExpense = response.data.totalExpenses
          this.incomeCount = response.data.incomeCount
        }else {
          this.totalIncome = 0
          this.totalExpense = 0
          this.incomeCount = 0
        }
      })
    }
  }

}
</script>

<style scoped>

</style>
